<template>
  <!-- WhatsApp拓客系统适用于以下场景 -->
  <div class="changjing">
    <div class="changjing_h2 tydisplay">
      <h2>{{whcj.title}}</h2>
    </div>
    <ul class="changjing_warp_ul">
        <li class="changjing_warp_li tydisplay" v-for="(item,i) in whcj.list" :key="i">
            <div class="changjing_warp_li_left">
                <img :src="item.imgUrl" alt="">
            </div>
            <div class="changjing_warp_li_right">
                <h4>{{item.name}}</h4>
                <p>{{item.content}}</p>
            </div>
        </li>
    </ul>

  </div>
</template>

<script>
export default {
  name: "changjing",
  props:["whcj"]
};
</script>

<style scoped>
.tydisplay {
  display: flex;
}
.changjing {
  background: #f6f6f8;
  padding: 28px 15px;
  color: #1d2845;
}
.changjing_h2{
    justify-content: center;
}
.changjing_h2>h2 {
  font-size: 1.8em;
  width: 61%;
  text-align: center;
}
.changjing_warp_ul{
    margin-top: 40px;
}
.changjing_warp_li{
    margin: 25px 0;
}

.changjing_warp_li_left>img{
    padding-top: 25px;
    width: 70%;
}
.changjing_warp_li_right{
  width: 180%;
}
.changjing_warp_li_right>h4{
    font-size: 1.3em;
    padding-bottom: 10px;
}
.changjing_warp_li_right>p{
    font-size: 1.2em;
    color: #6f7b8e;
}
</style>